<template>
  <div class="createcarousel-container">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="margin-right: 10px"
    >
      <el-form-item label="图片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/common/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          ref="upload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { CreateCarouselApi } from '@/api/carousel'
export default {
  data() {
    return {
      form: {
        image: '',
        name: ''
        // price: null,
        // store: null,
        // categoryId: undefined,
        // description: ''
      },
      category: [],
      fileList: [],
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  created() {},

  methods: {
    async onSubmit() {
      const { data: res } = await CreateCarouselApi(this.form)
      // this.category = res
      console.log(res)
      if (res) {
        this.$notify({
          title: '成功',
          message: res,
          type: 'success',
          duration: 2000
        })
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleAvatarSuccess(response, file, fileList) {
      // 拼接down接口预览
      // if(response.code === 0 && response.msg === '未登录'){
      //   window.top.location.href = '/backend/page/login/login.html'
      // }else{
      this.imageUrl = `http://localhost:8081/common/download?name=${response.data}`
      this.form.image = response.data
      // }
    },
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style>
.createcarousel-container {
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  /* .el-upload .el-upload--text { */
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
